<script lang='ts' setup>
import { ref, inject } from 'vue'
import { useAppStore } from "../../store";
import { OfficeOnline } from "../../api/index";
import { CreatedFormData } from "../../utils/CreatedFormData";
const { userInfo, projectInfo, projectList, baseUrl } = useAppStore();
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css"
// const message = useNaiveMessage()
// const Config = appConfig()
interface PropsType {
    iframeUrl?: string;
    classType: string,
    title: string,
}
const props = withDefaults(defineProps<PropsType>(), {
    iframeUrl: "",
    classType: 'none',
    title: '文件预览',
});
const filePaths = ref(props.iframeUrl);
const filePathName = ref('');
const type = ref(props.classType);
const info = ref({});
const txtContent = ref('');
const textShow = ref(false);
const pdfShow = ref(false);
const imgShow = ref(false);
const videoShow = ref(false);
const url = ref('')
const imgUrl = ref('')
const videoUrl = ref('')
const fage = ref(false)
const suffixName = ref(null)
const LookItemPics = async (filePaths?: any, typeShow?: any,) => {
    filePathName.value = typeShow;
    if (filePaths) {
        var suffix = filePaths.substring(filePaths.lastIndexOf(".") + 1).toLowerCase();
        suffixName.value = suffix;
        fage.value = true;
        if (
            suffix == "png" ||
            suffix == "jpg" ||
            suffix == "gif"
        ) {
            imgUrl.value = baseUrl + filePaths;
            imgShow.value = true;
            textShow.value = false;
            pdfShow.value = false;
            videoShow.value = false;
        } else if (suffix == "txt") {
            const urlText = baseUrl + filePaths;
            fetch(urlText).then(response => response.text())
                .then(text => {
                    // 转换编码，假设文件不是UTF-8编码，而是GBK编码
                    // const convertedText = new TextEncoder().encode(text);
                    // const blob = new Blob([convertedText], { type: 'charset=utf-8' });
                    // const urls = URL.createObjectURL(blob);
                    // 使用转换后的URL设置iframe的src属性
                    // this.iframeUrl = url;
                    txtContent.value = text;
                    textShow.value = true;
                    imgShow.value = false;
                    pdfShow.value = false;
                    videoShow.value = false;
                });
        } else if (suffix == "pdf") {
            setTimeout(() => {
                new Pdfh5("#PDFIframe2", {
                    pdfurl: baseUrl + filePaths,
                });
            }, 300);
            pdfShow.value = true;
            textShow.value = false;
            imgShow.value = false;
            videoShow.value = false;
        }
        else if (suffix == "mp4") {
            videoUrl.value = baseUrl + filePaths;
            videoShow.value = true;
            pdfShow.value = false;
            textShow.value = false;
            imgShow.value = false;
        }
        else {
            let fd = CreatedFormData(
                {
                    path: filePaths,
                    type: 'html'
                })
            const res = await OfficeOnline(fd);
            if (res.code != 0) {
                // message.error(res.msg);
            } else {
                url.value = baseUrl + res.data; //你的地址
                fage.value = true;
            }
        }
    }

}
const handClickIMG = () => {

}


defineExpose({ LookItemPics })

</script>
<template>
    <van-popup v-model:show="fage" closeable close-icon="close"
        :style="{ height: '90%', width: '95%', padding: '46px 14px 10px 14px', background: 'rgba(0,0,0,0.5)' }">
        <p v-if="filePathName != ''" class="specialText">{{ filePathName }}</p>
        <div class="flexLr" style="align-items: start;width:100%;height:100%;">
            <div v-if="pdfShow" id="PDFIframe2" class="PDFIframe" style="height:100vh;overflow: auto;"></div>
            <van-image v-else-if="imgShow" style="width:100%;" :src="imgUrl" @click="handClickIMG" />
            <video v-else-if="videoShow" controls :src="videoUrl" style="width:100%;height:95%"></video>
            <div v-else="textShow" v-html="txtContent"></div>
        </div>
    </van-popup>
</template>

<style lang='less' scoped>
.specialText {
    text-indent: 0em;
    padding-left: 0em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;
    text-align: center;
    color: #fff;
    font-size: 32px;
    padding: 0 20px;
}
</style>